<template>
  <div class="comment-page">
    <h2>对医生的评论</h2>

    <!-- 显示医生和疾病信息 -->
    <div class="doctor-info">
      <h3>医生: {{ doctor.name }}</h3>
      <p>疾病: {{ disease.name }}</p>
    </div>

    <!-- 评论类型选择 -->
    <div class="comment-type">
      <label for="comment-type">选择评论类型：</label>
      <select v-model="commentType">
        <option value="治疗前">治疗前</option>
        <option value="治疗中">治疗中</option>
        <option value="治疗后">治疗后</option>
      </select>
    </div>

    <!-- 评论输入框 -->
    <textarea v-model="newComment" placeholder="写下你的评论..." rows="5"></textarea>

    <!-- 提交按钮 -->
    <button @click="submitComment">提交评论</button>

    <!-- 评论展示 -->
    <div class="comments-list">
      <h3>评论历史</h3>
      <div v-for="(comment, index) in comments" :key="index" class="comment-item">
        <p><strong>{{ comment.type }}:</strong> {{ comment.content }}</p>
        <div class="comment-actions">
          <button @click="likeComment(index)">👍 {{ comment.likes }}</button>
          <button @click="dislikeComment(index)">👎 {{ comment.dislikes }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      doctor: {
        name: 'Dr. Smith',
      },
      disease: {
        name: '烧伤',
      },
      commentType: '治疗前', // 默认评论类型
      newComment: '', // 用户输入的新评论
      comments: [], // 存储评论列表
    };
  },
  methods: {
    // 提交评论
    submitComment() {
      if (this.newComment.trim() === '') {
        alert('评论内容不能为空');
        return;
      }

      // 新评论
      const newComment = {
        content: this.newComment,
        type: this.commentType,
        likes: 0,
        dislikes: 0,
      };

      // 将新评论添加到评论列表
      this.comments.push(newComment);

      // 清空输入框
      this.newComment = '';
    },

    // 点赞评论
    likeComment(index) {
      this.comments[index].likes += 1;
    },

    // 点踩评论
    dislikeComment(index) {
      this.comments[index].dislikes += 1;
    },
  },
};
</script>

<style scoped>
.comment-page {
  width: 60%;
  margin: 0 auto;
}

.comment-type, .comment-actions {
  margin: 10px 0;
}

.comment-actions button {
  margin-right: 10px;
}

textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>
